﻿@model string

@using Nop.Core;
@using Nop.Web.Framework.UI;

@{
    //register CSS and JS
    Html.AddCssFileParts("~/Administration/Scripts/fineuploader/fineuploader-4.2.2.min.css");
    Html.AddScriptParts("~/Administration/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js");

    //other variables
    var random = CommonHelper.GenerateRandomInteger();
    var clientId = "picture" + random;
    var pictureService = EngineContext.Current.Resolve<Nop.Services.Media.IPictureService>();
    var pictureIds = string.IsNullOrEmpty(Model) ? null : Model
                .Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
                .Select(x => Convert.ToInt32(x))
                .ToArray();
    const int pictureSize = 200;
}
<style>
    .uploaded-image .dp, .uploaded-image .dpup {
        padding: 0;
        margin: 10px;
    }

        .uploaded-image .dp img, .uploaded-image .dpup img {
            width: 100%;
        }

        .uploaded-image .dp i {
            position: absolute;
            top: -5px;
            right: -10px;
        }
</style>
<div id="@(clientId + "value")">
    @Html.HiddenFor(x => x)
</div>
<div class="row">
    <div class="col-md-12">
        <div id="@(clientId + "image")" class="uploaded-image">
            @if (pictureIds != null && pictureIds.Length > 0)
            {
                foreach (var pId in pictureIds)
                {
                    <div class="dp col-md-2" id="@pId">
                        <img src="@(pictureService.GetPictureUrl(pId, pictureSize, true))" />
                        <i class="fa fa-close"></i>
                    </div>
                }
            }
            <div class="dpup col-md-2" onclick="upclick();">
                <img src="~/Administration/Content/images/upload.png" />
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        @*fine uploader container*@
        <div id="@clientId" class="upload-image-button pull-left margin-t-5" style="display:none;">
            <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
            </noscript>
        </div>
        <div class="remove-image-button pull-left margin-t-5">
        </div>
    </div>
</div>

@*fine uploader template (keep it synchronized to \Content\fineuploader\templates\default.html)*@
<script type="text/template" id="@(clientId)-qq-template">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone style="display:none;">
            <span>@T("Common.FileUploader.DropFiles")</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button">
            <div>@T("Common.FileUploader.Upload")</div>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>@T("Common.FileUploader.Processing")</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                <span class="qq-upload-size-selector qq-upload-size"></span>
                <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">@T("Common.FileUploader.Cancel")</a>
                <a class="qq-upload-retry-selector qq-upload-retry" href="#">@T("Common.FileUploader.Retry")</a>
                <a class="qq-upload-delete-selector qq-upload-delete" href="#">@T("Common.FileUploader.Delete")</a>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div>
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#@(clientId)").fineUploader({
            request: {
                endpoint: '@(Url.Content("~/Admin/Picture/AsyncUpload"))'
            },
            template: "@(clientId)-qq-template",
            multiple: false,
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], //限制上传格式
                sizeLimit: 100 * 1024 * 1024              //限制上传大小
            },
            text: {
                uploadButton: '上传文件',
                cancelButton: '取消',
                retryButton: '重试',
                deleteButton: '删除',
                failUpload: '上传失败',
                dragZone: '拖拽文件到此上传',
                dropProcessing: '正在拖拽文件...',
                formatProgress: "{percent}% 已上传，文件大小为{total_size}",
                waitingForResponse: "处理中..."
            },
            messages: {
                typeError: "{file} 无效的扩展名.支持的扩展名: {extensions}.",
                sizeError: "{file} 文件太大，最大支持的文件大小 {sizeLimit}.",
                minSizeError: "{file} 太小，最小文件大小为：{minSizeLimit}.",
                emptyError: "{file} 文件为空，请重新选择",
                noFilesError: "文件不存在",
                tooManyItemsError: "Too many items ({netItems}) would be uploaded.  Item limit is {itemLimit}.",
                maxHeightImageError: "Image is too tall.",
                maxWidthImageError: "Image is too wide.",
                minHeightImageError: "Image is not tall enough.",
                minWidthImageError: "Image is not wide enough.",
                retryFailTooManyItems: "Retry failed - you have reached your file limit.",
                onLeave: "The files are being uploaded, if you leave now the upload will be canceled.",
                unsupportedBrowserIos8Safari: "Unrecoverable error - this browser does not permit file uploading of any kind due to serious bugs in iOS8 Safari.  Please use iOS8 Chrome until Apple fixes these issues."
            }
        }).on("complete", function (event, id, name, responseJSON, xhr) {
            if (responseJSON.success) {
                var strHtml = '<div class="dp col-md-2" id="' + responseJSON.pictureId + '"><img src="' + responseJSON.imageUrl + '" /><i class="fa fa-close"></i></div>';
                $("#@(clientId + "image") .dpup").before(strHtml);
                countpic();
            }
        });
        $(".uploaded-image").on("click", ".fa-close", function () {
            $(this).closest(".dp").remove();
            countpic();
        })
    });
    function upclick() {
        $(".qq-upload-button input[name='qqfile']").click();
    }
    function countpic() {
        var myArray = new Array()
        var groupPictures = $(".uploaded-image").find(".dp");
        if (groupPictures.length > 0) {
            for (i = 0; i < groupPictures.length; i++) {
                myArray.push(groupPictures[i].id);
            }
        }
        $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").val(myArray);
    }
</script>